<template>
  <div class="app-container">
    <el-steps :active="active" align-center finish-status="success" process-status="finish">
      <el-step title="商家信息" />
      <el-step title="结算方式和账户" />
      <el-step title="支付方式" />
      <el-step title="终端信息" />
      <el-step title="场景图片" />
    </el-steps>

    <el-form ref="FormRef" :model="formData" :rules="formRules" class="form-wrap" label-position="right" label-width="180px" size="default">
      <!-- 商家信息 -->
      <div v-if="active === 0">
        <el-alert
          :closable="false"
          class="mb20"
          show-icon
          title="温馨提示：带*号为必填；入网类型保存后不能再修改。上传身份证自动识别 身份证信息,上传营业执照自动识别 执照信息,识别信息需重新确认"
          type="warning"
        />
        <el-row>
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="商户类型" prop="commercialTenantState">-->
          <!--              <el-select v-model="formData.commercialTenantState" :clearable="true" :filterable="true"-->
          <!--                         placeholder="商户类型">-->
          <!--                <el-option v-for="dict in commercial_tenant_state" :key="dict.value" :label="dict.label"-->
          <!--                           :value="dict.value"/>-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->

          <el-col :span="12">
            <el-form-item label="入网类型" prop="netType">
              <el-select v-model="formData.netType" :clearable="true" :filterable="true" placeholder="请选入网类型">
                <el-option v-for="dict in laiqianle_register_type" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否直接接入" prop="isDirectConnect">
              <el-checkbox v-model="formData.isDirectConnect" :clearable="true" label="直接接入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否电子签约" prop="isUseElecAgreement">
              <el-radio-group v-model="formData.isUseElecAgreement" class="ml-4">
                <el-radio :label="'true'">是</el-radio>
                <el-radio :label="'false'">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.isDirectConnect">
          <el-col :span="12">
            <el-form-item label="所属银联机构号" prop="unionPayInsNo">
              <el-input v-model="formData.unionPayInsNo" :clearable="true" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银联商户号" prop="unionPayMrchntNo">
              <el-input v-model="formData.unionPayMrchntNo" :clearable="true" type="text" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="商户名称" prop="merchantName">
              <el-input v-model="formData.merchantName" :clearable="true" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商户简称" prop="shortName">
              <el-input v-model="formData.shortName" :clearable="true" type="text" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="formData.netType !== '3'">
          <el-col :span="12">
            <el-form-item label="执照类型" prop="licenceType">
              <el-select v-model="formData.licenceType" :clearable="true" :filterable="true">
                <el-option v-for="(item, index) in laiqianle_license_type" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执照编号" prop="licenceNo">
              <el-input v-model="formData.licenceNo" :clearable="true" placeholder="请输入统一社会信用代码" type="text" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col v-if="formData.netType !== '3'" :span="12">
            <el-row>
              <el-col :span="20">
                <el-form-item label="执照有限期" prop="licenceExpireDate">
                  <el-date-picker v-model="formData.licenceExpireDate" :clearable="true" format="YYYY-MM-DD" is-range type="date" value-format="YYYY-MM-DD" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-checkbox v-model="checkbox1" label="长期" @change="(value) => (formData.licenceExpireDate = value ? '2199-12-31' : null)" />
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-form-item label="省市区" required>
              <el-col :span="8">
                <el-form-item prop="addressinfoId.province">
                  <el-select v-model="formData.addressinfoId.province" :clearable="true" :filterable="true" placeholder="请选择省" @change="handleProvinceChange">
                    <el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="addressinfoId.city">
                  <el-select v-model="formData.addressinfoId.city" :clearable="true" :filterable="true" placeholder="请选择市" @change="handleCityChange">
                    <el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="addressinfoId.district">
                  <el-select v-model="formData.addressinfoId.district" :clearable="true" :filterable="true" placeholder="请选择区">
                    <el-option v-for="item in areaOptions" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="经营类型" prop="manageTypeId">
              <el-cascader
                v-model="formData.manageTypeId"
                filterable
                :options="businessTypeOptions"
                :props="{ value: 'code', label: 'name', emitPath: false }"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商户地址" prop="addressinfoId.address">
              <el-input v-model="formData.addressinfoId.address" :clearable="true" type="text" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="经营范围" prop="manageScope">
              <el-input v-model="formData.manageScope" :clearable="true" type="text" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="法人名称" prop="lepCertName">
              <el-input v-model="formData.lepCertName" :clearable="true" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件类型" prop="lepCertType">
              <el-select v-model="formData.lepCertType" :clearable="true" :filterable="true">
                <el-option v-for="item in laiqianle_card_type" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="法人证件编号" prop="lepCertNo">
              <el-input v-model="formData.lepCertNo" :clearable="true" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="20">
                <el-form-item label="法人证件有效日期" prop="lepCertExpireDate">
                  <el-date-picker v-model="formData.lepCertExpireDate" clearable format="YYYY-MM-DD" is-range type="date" value-format="YYYY-MM-DD" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-checkbox v-model="checkbox2" label="长期" @change="(value) => (formData.lepCertExpireDate = value ? '2199-12-31' : null)" />
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contactName">
              <el-input v-model="formData.contactName" :clearable="true" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人手机号" prop="contactMobile">
              <el-input v-model="formData.contactMobile" :clearable="true" type="text" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="注册资金" prop="registeredCapital">
              <el-input v-model="formData.registeredCapital" :clearable="true" type="number">
                <template #append>万元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="formData.remarks" :clearable="true" type="text" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请上传证件正面', trigger: 'change' }]" label="证件正面" prop="fileList[0].path">
              <ImageUpload1 v-model="formData.fileList[0].path" @upload-event="(value) => handleImageEvent(value, 'card')" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请上传证件反面', trigger: 'change' }]" label="证件反面" prop="fileList[1].path">
              <ImageUpload1 v-model="formData.fileList[1].path" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          v-if="formData.netType !== '3'"
          :rules="[{ required: true, message: '请上传营业执照', trigger: 'change' }]"
          label="营业执照"
          prop="fileList[2].path"
        >
          <ImageUpload1 v-model="formData.fileList[2].path" @upload-event="(value) => handleImageEvent(value, 'business')" />
        </el-form-item>
      </div>

      <!-- 结算方式和账户 -->
      <div v-if="active === 1">
        <el-alert :closable="false" class="mb20" show-icon title="温馨提示：此账号为结算账号(入账账号) 上传银行卡自动识别 银行卡信息,识别信息需重新确认" type="warning" />
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号性质" prop="settleAccount.bankAccountType">
              <el-radio-group v-model="formData.settleAccount.bankAccountType">
                <el-radio :disabled="formData.netType === '3'" :label="1">对公</el-radio>
                <el-radio :label="2">对私</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" />
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="银行账号" prop="settleAccount.bankAccountNo">
              <el-input v-model="formData.settleAccount.bankAccountNo" :clearable="true" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账号名称" prop="settleAccount.bankAccountName">
              <el-input v-model="formData.settleAccount.bankAccountName" :clearable="true" type="text" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="银行类型" prop="settleAccount.bankCode">
              <!--@change="(value) => handleBankChange(value, 'settleAccount')"-->
              <el-select v-model="formData.settleAccount.bankCode" :clearable="true" :filterable="true">
                <el-option v-for="item in bankOptions" :key="item.id" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开户行省市">
              <el-col :span="12">
                <el-form-item>
                  <el-select v-model="province" :clearable="true" :filterable="true" placeholder="请选择省" @change="handleProvinceChange1">
                    <el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <el-select v-model="city" :clearable="true" :filterable="true" placeholder="请选择市">
                    <el-option v-for="item in cityOptions1" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开户行" prop="settleAccount.openBank">
              <el-select
                v-model="formData.settleAccount.openBank"
                :clearable="true"
                :filterable="true"
                :loading="openBankLoading"
                :remote="true"
                :remote-method="openBankRemoteMethod"
                :remote-show-suffix="true"
                :reserve-keyword="true"
              >
                <el-option v-for="item in settleAccountOpenBankOptions" :key="item.id" :label="item.bankName" :value="item.bankName" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.settleAccount.bankAccountType === 2">
          <el-col :span="12">
            <el-form-item label="证件类型" prop="settleAccount.accountIdentityType">
              <el-select v-model="formData.settleAccount.accountIdentityType" :clearable="true" :filterable="true">
                <el-option v-for="item in laiqianle_card_type" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件号" prop="settleAccount.accountIdentityNo">
              <el-input v-model="formData.settleAccount.accountIdentityNo" :clearable="true" type="text" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-if="formData.settleAccount.bankAccountType === 2" :span="12">
            <el-form-item label="预留手机" prop="settleAccount.acctMobile">
              <el-input v-model="formData.settleAccount.acctMobile" :clearable="true" type="text" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请上传结算账户正面', trigger: 'change' }]" label="结算账户正面" prop="fileList[3].path">
              <ImageUpload1 v-model="formData.fileList[3].path" @upload-event="(value) => handleImageEvent(value, 'bank')" />
            </el-form-item>
          </el-col>
          <template v-if="formData.netType === '2' && formData.settleAccount.bankAccountType === 2 && formData.settleAccount.bankAccountName !== formData.lepCertName">
            <el-col :span="12">
              <el-form-item :rules="[{ required: true, message: '请上传委托入款授权照片' }]" label="委托入款授权照片" prop="fileList[9].path">
                <ImageUpload1 v-model="formData.fileList[9].path" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :rules="[{ required: true, message: '请上传法人和入账人手持身份证的合照' }]" label="法人和入账人手持身份证的合照" prop="fileList[10].path">
                <ImageUpload1 v-model="formData.fileList[10].path" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :rules="[{ required: true, message: '请上传非法人身份证正面' }]" label="非法人身份证正面" prop="fileList[11].path">
                <ImageUpload1 v-model="formData.fileList[11].path" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :rules="[{ required: true, message: '请上传非法人身份证反面' }]" label="非法人身份证反面" prop="fileList[12].path">
                <ImageUpload1 v-model="formData.fileList[12].path" />
              </el-form-item>
            </el-col>
          </template>

          <template v-if="formData.netType === '1' && formData.settleAccount.bankAccountType === 2 && formData.settleAccount.bankAccountName !== formData.lepCertName">
            <el-col :span="12">
              <el-form-item :rules="[{ required: true, message: '请上传委托入款授权照片' }]" label="委托入款授权照片" prop="fileList[9].path">
                <ImageUpload1 v-model="formData.fileList[9].path" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :rules="[{ required: true, message: '请上传非法人身份证正面' }]" label="非法人身份证正面" prop="fileList[11].path">
                <ImageUpload1 v-model="formData.fileList[11].path" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :rules="[{ required: true, message: '请上传非法人身份证反面' }]" label="非法人身份证反面" prop="fileList[12].path">
                <ImageUpload1 v-model="formData.fileList[12].path" />
              </el-form-item>
            </el-col>
          </template>
        </el-row>

        <el-alert
          v-if="
            (formData.netType === '1' && formData.settleAccount.bankAccountType === 2) ||
            (formData.netType === '2' && formData.settleAccount.bankAccountType === 2 && formData.settleAccount.bankAccountName !== formData.lepCertName)
          "
          :closable="false"
          class="mb20"
          show-icon
          title="温馨提示：此账号为备案账号"
          type="info"
        />
        <div
          v-if="
            (formData.netType === '1' && formData.settleAccount.bankAccountType === 2) ||
            (formData.netType === '2' && formData.settleAccount.bankAccountType === 2 && formData.settleAccount.bankAccountName !== formData.lepCertName)
          "
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="账号性质" prop="filingAccount.bankAccountType">
                <el-radio-group v-model="formData.filingAccount.bankAccountType">
                  <el-radio :label="1">对公</el-radio>
                  <el-radio :disabled="formData.netType === '1'" :label="2">对私</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12" />
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="银行账号" prop="filingAccount.bankAccountNo">
                <el-input v-model="formData.filingAccount.bankAccountNo" :clearable="true" type="text" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="账号名称" prop="filingAccount.bankAccountName">
                <el-input v-model="formData.filingAccount.bankAccountName" :clearable="true" type="text" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="银行类型" prop="filingAccount.bankCode">
                <!--@change="(value) => handleBankChange(value, 'settleAccount')"-->
                <el-select v-model="formData.filingAccount.bankCode" :clearable="true" :filterable="true">
                  <el-option v-for="item in bankOptions" :key="item.id" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户行省市">
                <el-col :span="8">
                  <el-form-item>
                    <el-select v-model="province" :clearable="true" :filterable="true" placeholder="请选择省" @change="handleProvinceChange1">
                      <el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item>
                    <el-select v-model="city" :clearable="true" :filterable="true" placeholder="请选择市">
                      <el-option v-for="item in cityOptions1" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="开户行" prop="filingAccount.openBank">
                <el-select
                  v-model="formData.filingAccount.openBank"
                  :clearable="true"
                  :filterable="true"
                  :loading="openBankLoading"
                  :remote="true"
                  :remote-method="openBankRemoteMethod"
                  :remote-show-suffix="true"
                  :reserve-keyword="true"
                >
                  <el-option v-for="item in filingAccountOpenBankOptions" :key="item.id" :label="item.bankName" :value="item.bankName" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :rules="[{ required: true, message: '请上传备案账户正面' }]" label="备案账户正面" prop="fileList[4].path">
                <ImageUpload1 v-model="formData.fileList[4].path" @upload-event="(value) => handleImageEvent(value, 'bank1')" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>

      <!-- 支付方式 -->
      <div v-if="active === 2">
        <el-row>
          <el-col :span="12">
            <el-form-item label="借记卡费率" prop="cardPay.debitRate">
              <el-input-number v-model="formData.cardPay.debitRate" :precision="2" :step="0.01" placeholder="不用加 % 例如 0.05" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="贷记卡费率" prop="cardPay.feeRate">
              <el-input-number v-model="formData.cardPay.feeRate" :precision="2" :step="0.01" placeholder="不用加 % 例如 0.05" type="number" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="银联扫码优惠费率" prop="quickPassPay.perferStage.feeRate">-->
          <!--              <el-input-number v-model="formData.quickPassPay.perferStage.feeRate" :precision="2" :step="0.01" placeholder="不用加 % 例如 0.05" type="text" />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="12">
            <el-form-item label="借记卡封顶值" prop="cardPay.debitCap">
              <el-input v-model="formData.cardPay.debitCap" :clearable="true" :min="feeRateList.cardpayDebitCap" style="width: 34%" type="number" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="开通微信支付宝">
          <el-switch v-model="formData.switch" />
        </el-form-item>
        <el-row v-if="formData.switch">
          <el-col :span="12">
            <el-form-item label="微信费率" prop="wxPay.feeRate">
              <el-input-number v-model="formData.wxPay.feeRate" :clearable="true" :precision="2" :step="0.01" placeholder="不用加 % 例如 0.05" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付宝费率" prop="aliPay.feeRate">
              <el-input-number v-model="formData.aliPay.feeRate" :clearable="true" :precision="2" :step="0.01" placeholder="不用加 % 例如 0.05" type="text" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-form-item
          v-if="formData.isUseElecAgreement === 'false' || formData.isUseElecAgreement === false"
          :rules="[{ required: true, message: '请上传签约协议照片' }]"
          label="签约协议照片"
          prop="fileList[5].path"
        >
          <ImageUpload1 v-model="formData.fileList[5].path" />
        </el-form-item> -->
        <template v-if="formData.isUseElecAgreement === 'false'">
          <el-form-item v-if="formData.netType != '2'" :rules="[{ required: true, message: '请上传签约协议照片' }]" label="签约协议照片" prop="fileList[5].path">
            <ImageUpload1 v-model="formData.fileList[5].path" />
          </el-form-item>
          <el-form-item v-if="formData.netType == '2'" label="签约协议照片" prop="fileList[5].path">
            <ImageUpload1 v-model="formData.fileList[5].path" />
          </el-form-item>
        </template>
      </div>

      <!-- 终端信息 -->
      <div v-if="active === 3">
        <template v-for="(item, index) in formData.terminalList" :key="item.key">
          <el-row>
            <el-col :span="12">
              <el-form-item
                :prop="`terminalList[${index}].terminalName`"
                :rules="[{ required: true, message: '请输入签购单名称', trigger: 'change' }]"
                label="签购单名称"
              >
                <el-input v-model="item.terminalName" :clearable="true" type="text" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :prop="`terminalList[${index}].deviceSn`" :rules="[{ validator: validateDeviceStatus, trigger: 'change' }]" label="设备号">
                <el-select
                  v-model="item.deviceSn"
                  :loading="loading1"
                  :remote-method="remoteMethod"
                  clearable
                  filterable
                  placeholder="请选择绑定设备"
                  remote
                  remote-show-suffix
                  reserve-keyword
                >
                  <el-option v-for="item1 in deviceList" :key="item1.sn" :label="item1.sn" :value="item1.sn" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item
                :prop="`terminalList[${index}].contactTel`"
                :rules="[
                  { required: true, message: '请输入联系电话', trigger: 'change' },
                  { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'change' },
                ]"
                label="联系电话"
              >
                <el-input v-model="item.contactTel" :clearable="true" type="text" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="省市区" required>
                <el-col :span="8">
                  <el-form-item :prop="`terminalList[${index}].installProvince`" :rules="[{ required: true, message: '请选择省', trigger: 'change' }]">
                    <el-select
                      v-model="item.installProvince"
                      :clearable="true"
                      :filterable="true"
                      placeholder="请选择省"
                      @change="(value) => handleTerminalProvinceChange(item, value)"
                    >
                      <el-option v-for="item1 in provinceOptions" :key="item1.id" :label="item1.name" :value="item1.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :prop="`terminalList[${index}].installCity`" :rules="[{ required: true, message: '请选择市', trigger: 'change' }]">
                    <el-select
                      v-model="item.installCity"
                      :clearable="true"
                      :filterable="true"
                      placeholder="请选择市"
                      @change="(value) => handleTerminalCityChange(item, value)"
                    >
                      <el-option v-for="item1 in item.installCityOptions" :key="item1.id" :label="item1.name" :value="item1.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :prop="`terminalList[${index}].installDistrict`" :rules="[{ required: true, message: '请选择区', trigger: 'change' }]">
                    <el-select v-model="item.installDistrict" :clearable="true" :filterable="true" placeholder="请选择区">
                      <el-option v-for="item1 in item.installDistrictOptions" :key="item1.id" :label="item1.name" :value="item1.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item :prop="`terminalList[${index}].installAddress`" :rules="[{ required: true, message: '请输入安装地址', trigger: 'change' }]" label="安装地址">
                <el-input v-model="item.installAddress" :clearable="true" type="text" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item
                :prop="`terminalList[${index}].isOpenConsume`"
                :rules="[{ required: true, message: '请选择交易权限-查询', trigger: 'change' }]"
                label="交易权限-查询"
              >
                <el-switch v-model="item.isOpenConsume" />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item
                :prop="`terminalList[${index}].isOpenDebitCard`"
                :rules="[{ required: true, message: '请选择卡类型权限-借记卡', trigger: 'change' }]"
                label="卡类型权限-借记卡"
              >
                <el-switch v-model="item.isOpenDebitCard" />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item
                :prop="`terminalList[${index}].isOpenRefund`"
                :rules="[{ required: true, message: '请选择交易权限-退货', trigger: 'change' }]"
                label="交易权限-退货"
              >
                <el-switch v-model="item.isOpenRefund" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                :prop="`terminalList[${index}].isOpenCreditCard`"
                :rules="[{ required: true, message: '请选择卡类型权限-贷记卡', trigger: 'change' }]"
                label="卡类型权限-贷记卡"
              >
                <el-switch v-model="item.isOpenCreditCard" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item
                :prop="`terminalList[${index}].isOpenQueryTrade`"
                :rules="[{ required: true, message: '请选择交易权限-消费类', trigger: 'change' }]"
                label="交易权限-消费类"
              >
                <el-switch v-model="item.isOpenQueryTrade" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                :prop="`terminalList[${index}].isOpenSemiCreditCard`"
                :rules="[{ required: true, message: '请选择卡类型权限-准贷记卡', trigger: 'change' }]"
                label="卡类型权限-准贷记卡"
              >
                <el-switch v-model="item.isOpenSemiCreditCard" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                :prop="`terminalList[${index}].isOpenPreauthorize`"
                :rules="[{ required: true, message: '请选择交易权限-预授权类', trigger: 'change' }]"
                label="交易权限-预授权类"
              >
                <el-switch v-model="item.isOpenPreauthorize" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                :prop="`terminalList[${index}].isOpenPreauthorizeQr`"
                :rules="[{ required: true, message: '请选择交易权限-二维码预授权类', trigger: 'change' }]"
                label="交易权限-二维码预授权类"
                label-width="200px"
              >
                <el-switch v-model="item.isOpenPreauthorizeQr" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item
                :prop="`terminalList[${index}].isOpenPrepaidCard`"
                :rules="[{ required: true, message: '请选择卡类型权限-预付费卡', trigger: 'change' }]"
                label="卡类型权限-预付费卡"
              >
                <el-switch v-model="item.isOpenPrepaidCard" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="mt40" justify="center">
            <el-col v-if="index + 1 === formData.terminalList.length" :span="2">
              <el-button type="primary" @click="handleAddTerminal">添加终端</el-button>
            </el-col>
            <el-col v-if="formData.terminalList.length > 1" :span="1">
              <el-button type="danger" @click="handleDelTerminal(index)">删除终端</el-button>
            </el-col>
          </el-row>

          <el-divider />
        </template>
      </div>

      <!-- 场景图片 -->
      <div v-if="active >= 4">
        <el-row>
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请上传门店照片' }]" label="上传门店照片" prop="fileList[6].path">
              <ImageUpload1 v-model="formData.fileList[6].path" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请上传收银台照片' }]" label="上传收银台照片" prop="fileList[7].path">
              <ImageUpload1 v-model="formData.fileList[7].path" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item :rules="[{ required: true, message: '请上传店内商品照片' }]" label="上传店内商品照片" prop="fileList[8].path">
          <ImageUpload1 v-model="formData.fileList[8].path" />
        </el-form-item>
      </div>
    </el-form>

    <div class="btn-wrap">
      <el-button v-show="active > 0" style="margin-top: 12px" @click="prev">上一步</el-button>
      <el-button v-show="active < 4" style="margin-top: 12px" @click="next">下一步</el-button>
      <el-button v-show="active >= 4" style="margin-top: 12px" @click="next">保存</el-button>
      <el-button style="margin-top: 12px" @click="handleTemporarilyStore">暂存</el-button>
    </div>

    <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" align-center title="提示" width="30%">
      <span>上次进件尚未完成,是否继续?</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleDraftCancel">丢弃</el-button>
          <el-button type="primary" @click="handleDraftConfirm">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import ImageUpload1 from './ImageUpload.vue';
  import useUserStore from '@/store/modules/user';
  import { reactive, ref } from 'vue';
  import type { FormInstance, FormRules } from 'element-plus';
  import { ElMessage } from 'element-plus';
  import { useRouter } from 'vue-router';
  import { useDict } from '@/utils/dict';
  import { handleTree } from '@/utils/ruoyi';
  import {
    addDraft,
    areaListByParentId,
    bankList,
    businessTypeList,
    delDraft,
    draftList,
    editDraft,
    equipmentDetail,
    getDeviceList,
    openbankList,
    openbankListNew,
    register,
  } from '@/api/laiqianle/register';
  import { getBank, getBusiness, getCard } from '@/api/system/orc';
  import { getAgent } from '@/api/agent/agent';

  // 字典 laiqianle_register_type 入网类型  laiqianle_card_type 证件类型  laiqianle_license_type 营业执照类型 commercial_tenant_state商户类型
  const dicts = ['laiqianle_register_type', 'laiqianle_card_type', 'laiqianle_license_type', 'commercial_tenant_state'];
  const { laiqianle_register_type, laiqianle_card_type, laiqianle_license_type, commercial_tenant_state } = useDict(...dicts);

  const userStore = useUserStore();
  const router = useRouter();
  // 表单 Ref
  const FormRef = ref<FormInstance>();

  // 经营类型
  interface BusinessType {
    id: number;
    name: string;
    code: string;
    pcode: string;
    children: BusinessType[];

    [key: string]: any;
  }

  const businessTypeOptions = ref<BusinessType[]>([]);
  const getBusinessTypeList = async () => {
    const { data } = await businessTypeList();
    businessTypeOptions.value = handleTree(data, 'code', 'pcode', 'children');
  };

  // 商户信息 省市区
  interface provinces {
    id: number;
    name: string;
    code: string;
    pcode: string;

    [key: string]: any;
  }

  let provinceOptions = ref<provinces[]>([]);
  let cityOptions = ref<provinces[]>([]);
  let cityOptions1 = ref<provinces[]>([]);
  let areaOptions = ref<provinces[]>([]);

  let city = ref();
  let province = ref();

  const getProvinceList = async (parentId) => {
    if (parentId === '') return [];
    const { data } = await areaListByParentId(parentId);
    return data;
  };
  const handleProvinceChange = async (value) => {
    cityOptions.value = await getProvinceList(value);
    formData.value.addressinfoId.city = null;
    formData.value.addressinfoId.district = null;
  };
  const handleProvinceChange1 = async (value) => {
    cityOptions1.value = await getProvinceList(value);
  };
  const handleCityChange = async (value) => {
    areaOptions.value = await getProvinceList(value);
    formData.value.addressinfoId.district = null;
  };

  // 终端信息 省市区
  const handleTerminalProvinceChange = async (item, value) => {
    item.installCityOptions = await getProvinceList(value);
    item.installCity = null;
    item.installDistrict = null;
  };

  const handleTerminalCityChange = async (item, value) => {
    item.installDistrictOptions = await getProvinceList(value);
    item.installDistrict = null;
  };

  // 银行列表
  interface BankOptions {
    id: string;
    name: string;
    code: string;

    [key: string]: any;
  }

  const bankOptions = ref<BankOptions[]>([]);
  const getBankList = async () => {
    const { rows } = await bankList();
    bankOptions.value = rows;
  };

  // 开户行 根据银行名称查询开户行列表
  interface OpenBankOptions {
    id: string;
    bankName: string;

    [key: string]: any;
  }

  const openBankLoading = ref(false);
  const settleAccountOpenBankOptions = ref<OpenBankOptions[]>([]);
  const filingAccountOpenBankOptions = ref<OpenBankOptions[]>([]);

  const debounce1 = (fun, delay) => {
    let timer;
    return function (args) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fun(args);
      }, delay);
    };
  };

  const openBankRemoteMethod = (value) => {
    debounce1(openBankRemoteMethod1, 1000)(value);
  };

  const openBankRemoteMethod1 = async (bankName) => {
    if (!bankName) {
      settleAccountOpenBankOptions.value = [];
      filingAccountOpenBankOptions.value = [];
      return;
    }
    openBankLoading.value = true;
    const addressNameObj = cityOptions1.value.find((item) => {
      return item.id === city.value;
    });
    // const { rows } = await openbankList({ bankName });
    const { data } = await openbankListNew({ bankName, addressName: addressNameObj.name });
    settleAccountOpenBankOptions.value = data;
    filingAccountOpenBankOptions.value = data;
    openBankLoading.value = false;
  };

  // 费率信息
  const feeRateList: any = ref('');
  const getFeeRate = async () => {
    const res = await getAgent(userStore.userId);
    feeRateList.value = res.data;
  };

  // 表单字段以及表单规则
  let checkbox1 = ref(false);
  let checkbox2 = ref(false);
  let formData = ref({
    netType: null, // 入网类型
    commercialTenantState: '1', //商户类型：1=普通商户,2=代理商户
    isDirectConnect: false, // 是否直接接入
    isUseElecAgreement: 'true', // 新增字段 -------  是否电子签约
    unionPayInsNo: null, // 所属银联机构号
    unionPayMrchntNo: null, // 银联商户号
    merchantName: null, // 商户名称
    shortName: null, // 商户简称
    licenceType: null, // 执照类型
    licenceNo: null, // 执照编号
    licenceExpireDate: null, // 执照有效期
    manageTypeId: null, // 经营类型
    manageScope: '', // 经营范围
    lepCertName: null, // 法人名称
    lepCertType: null, // 证件类型
    lepCertNo: null, // 法人证件编号
    lepCertExpireDate: null, // 法人证件有效日期
    contactName: null, // 联系人
    contactMobile: null, // 联系人手机号
    registeredCapital: null, // 注册资金
    remarks: null, // 备注
    addressinfoId: {
      province: null,
      city: null,
      district: null,
      address: '',
    },
    // 结算账户
    settleAccount: {
      bankAccountType: 0, // 账号性质
      bankAccountNo: null, // 银行账户
      bankAccountName: null, // 账号名称
      bankCode: null, // 银行类型
      openBank: null, // 开户行
      acctMobile: null, // 预留手机
      accountIdentityType: null, // 证件类型
      accountIdentityNo: null, // 证件编号
    },
    // 备案账户
    filingAccount: {
      bankAccountType: 0, // 账号性质
      bankAccountNo: null, // 银行账号
      bankAccountName: null, // 账号名称
      bankCode: null, // 银行类型
      openBank: null, // 开户行
    },
    // 银行卡费率信息
    cardPay: {
      feeRate: null, // 贷记卡费率
      debitRate: null, // 借记卡费率
      debitCap: null, // 借记卡封顶值
    },
    // 借记卡优惠费率信息
    quickPassPay: {
      perferStage: {
        feeRate: 0.38,
      }, // 银联扫码费率
    },
    // 开通微信支付宝
    switch: false,
    // 微信费率信息
    wxPay: {
      feeRate: null,
    },
    // 阿里费率信息
    aliPay: {
      feeRate: null,
    },
    // 终端信息
    terminalList: [
      {
        key: Math.random(),
        installCityOptions: [],
        installDistrictOptions: [],
        outTerminalNo: null,
        terminalName: null,
        deviceSn: null,
        contactTel: null,
        installAddress: null,
        installProvince: null,
        installCity: null,
        installDistrict: null,
        isOpenConsume: false,
        isOpenRefund: false,
        isOpenQueryTrade: false,
        isOpenPreauthorize: false,
        isOpenDebitCard: false,
        isOpenCreditCard: false,
        isOpenSemiCreditCard: false,
        isOpenPrepaidCard: false,
        isOpenPreauthorizeQr: false,
      },
    ],
    // 图片
    fileList: [
      { fileTypeId: 11, path: null }, // 证件正面
      { fileTypeId: 12, path: null }, // 证件反面
      { fileTypeId: 15, path: null }, // 营业执照
      { fileTypeId: 13, path: null }, // 结算账户正面
      { fileTypeId: 21, path: null }, // 备案账户正面
      { fileTypeId: 31, path: null }, // 签约协议照片
      { fileTypeId: 18, path: null }, // 门店照片
      { fileTypeId: 19, path: null }, // 收银台照片
      { fileTypeId: 20, path: null }, // 店内商品照片
      { fileTypeId: 41, path: null }, // 委托入款授权照片
      { fileTypeId: 24, path: null }, // 法人和入账人手持身份证合照
      { fileTypeId: 22, path: null }, // 非法人身份证正面
      { fileTypeId: 23, path: null }, // 非法人身份证反面
    ],
  });
  let formRules = reactive<FormRules>({
    netType: [{ required: true, message: '请选择入网类型', trigger: 'change' }],
    commercialTenantState: [{ required: true, message: '请选择商户类型', trigger: 'change' }],
    isDirectConnect: [{ required: true, message: '请选择是否直接接入', trigger: 'change' }],
    unionPayInsNo: [{ required: true, message: '请输入所属银联机构号', trigger: 'change' }],
    unionPayMrchntNo: [{ required: true, message: '请输入银联商户号', trigger: 'change' }],
    merchantName: [{ required: true, message: '请输入商户名称', trigger: 'change' }],
    shortName: [{ required: true, message: '请输入商户简称', trigger: 'change' }],
    licenceType: [{ required: true, message: '请选择执照类型', trigger: 'change' }],
    licenceNo: [{ required: true, message: '请输入执照编号', trigger: 'change' }],
    licenceExpireDate: [{ required: true, message: '请选择执照有效期', trigger: 'change' }],
    provinces: [{ required: true, message: '请选择省市区', trigger: 'change' }],
    'addressinfoId.province': [{ required: true, message: '请选择省', trigger: 'change' }],
    'addressinfoId.city': [{ required: true, message: '请选择市', trigger: 'change' }],
    'addressinfoId.district': [{ required: true, message: '请选择区', trigger: 'change' }],
    'addressinfoId.address': [{ required: true, message: '请选择账号性质', trigger: 'change' }],
    manageTypeId: [{ required: true, message: '请选择经营类型', trigger: 'change' }],
    manageScope: [{ required: true, message: '请输入经营范围', trigger: 'change' }],
    lepCertName: [{ required: true, message: '请输入法人名称', trigger: 'change' }],
    lepCertType: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
    lepCertNo: [{ required: true, message: '请输入法人证件编号', trigger: 'change' }],
    lepCertExpireDate: [{ required: true, message: '请选择法人证件有效期', trigger: 'change' }],
    contactName: [{ required: true, message: '请输入联系人姓名', trigger: 'change' }],
    contactMobile: [
      { required: true, message: '请输入联系人手机号', trigger: 'change' },
      { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'change' },
    ],
    registeredCapital: [{ required: true, message: '请输入注册资金', trigger: 'change' }],
    'settleAccount.bankAccountType': [{ required: true, message: '请选择账号性质', trigger: 'change' }],
    'settleAccount.bankAccountNo': [{ required: true, message: '请输入银行账号', trigger: 'change' }],
    'settleAccount.bankAccountName': [{ required: true, message: '请输入账号名称', trigger: 'change' }],
    'settleAccount.bankCode': [{ required: true, message: '请选择银行类型', trigger: 'change' }],
    'settleAccount.openBank': [{ required: true, message: '请选择开户行', trigger: 'change' }],
    'settleAccount.acctMobile': [
      { required: true, message: '请输入手机号', trigger: 'change' },
      { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'change' },
    ],
    'settleAccount.accountIdentityType': [{ required: true, message: '请选择证件类型', trigger: 'change' }],
    'settleAccount.accountIdentityNo': [{ required: true, message: '请输入证件号码', trigger: 'change' }],
    'filingAccount.bankAccountType': [{ required: true, message: '请选择账号性质', trigger: 'change' }],
    'filingAccount.bankAccountNo': [{ required: true, message: '请输入银行账号', trigger: 'change' }],
    'filingAccount.bankAccountName': [{ required: true, message: '请输入账号名称', trigger: 'change' }],
    'filingAccount.bankCode': [{ required: true, message: '请选择银行类型', trigger: 'change' }],
    'filingAccount.openBank': [{ required: true, message: '请选择开户行', trigger: 'change' }],
    'cardPay.debitRate': [
      { required: true, message: '请输入借记卡费率', trigger: 'change' },
      {
        validator: (rule, value, callback) => {
          // 异步验证代码
          if (value < feeRateList.value.cardpayDebitRate) {
            callback(new Error('请输入正确的借记卡费率'));
          } else {
            callback();
          }
        },
        trigger: 'change',
      },
    ],
    'cardPay.feeRate': [
      { required: true, message: '请输入贷记卡费率', trigger: 'change' },
      {
        validator: (rule, value, callback) => {
          // 异步验证代码
          if (value < feeRateList.value.cardpayFeeRate) {
            callback(new Error('请输入正确的贷记卡费率'));
          } else {
            callback();
          }
        },
        trigger: 'change',
      },
    ],
    'cardPay.debitCap': [
      { required: true, message: '请输入借记卡封顶', trigger: 'change' },
      {
        validator: (rule, value, callback) => {
          // 异步验证代码
          if (value < feeRateList.value.cardpayDebitCap) {
            callback(new Error('请输入正确的借记卡封顶'));
          } else {
            callback();
          }
        },
        trigger: 'change',
      },
    ],
    'quickPassPay.perferStage.feeRate': [
      { required: true, message: '请输入银联扫码费率', trigger: 'change' },
      {
        validator: (rule, value, callback) => {
          // 异步验证代码
          if (value < feeRateList.value.preferstageFeerate) {
            callback(new Error('请输入正确的银联扫码费率'));
          } else {
            callback();
          }
        },
        trigger: 'change',
      },
    ],
    'wxPay.feeRate': [
      { required: true, message: '请输入微信费率', trigger: 'change' },
      {
        validator: (rule, value, callback) => {
          // 异步验证代码
          if (value < feeRateList.value.wxpayFeerate) {
            callback(new Error('请输入正确的微信费率'));
          } else {
            callback();
          }
        },
        trigger: 'change',
      },
    ],
    'aliPay.feeRate': [
      { required: true, message: '请输入支付宝费率', trigger: 'change' },
      {
        validator: (rule, value, callback) => {
          // 异步验证代码
          if (value < feeRateList.value.alipayFeerate) {
            callback(new Error('请输入正确的支付宝费率'));
          } else {
            callback();
          }
        },
        trigger: 'change',
      },
    ],
    imgValue1: [{ required: true, message: '请上传证件正面', trigger: 'change' }],
    imgValue2: [{ required: true, message: '请上传证件反面', trigger: 'change' }],
    imgValue3: [{ required: true, message: '请上传营业执照', trigger: 'change' }],
    imgValue4: [{ required: true, message: '请上传结算账户正面', trigger: 'change' }],
    imgValue5: [{ required: true, message: '请上传备案账户正面', trigger: 'change' }],
    imgValue6: [{ required: false, message: '请上传签约协议照片', trigger: 'change' }],
    imgValue7: [{ required: true, message: '请上传门店照片', trigger: 'change' }],
    imgValue8: [{ required: true, message: '请上传收银台照片', trigger: 'change' }],
    imgValue9: [{ required: true, message: '请上传店内商品照片', trigger: 'change' }],
  });

  // 添加终端
  const handleAddTerminal = () => {
    formData.value.terminalList.push({
      key: Math.random(),
      installCityOptions: [],
      installDistrictOptions: [],
      outTerminalNo: null,
      terminalName: null,
      deviceSn: null,
      contactTel: null,
      installAddress: null,
      installProvince: null,
      installCity: null,
      installDistrict: null,
      isOpenConsume: false,
      isOpenRefund: false,
      isOpenQueryTrade: false,
      isOpenPreauthorize: false,
      isOpenDebitCard: false,
      isOpenCreditCard: false,
      isOpenSemiCreditCard: false,
      isOpenPrepaidCard: false,
      isOpenPreauthorizeQr: false,
    });
  };
  // 删除终端
  const handleDelTerminal = (index: number): void => {
    formData.value.terminalList.splice(index, 1);
  };
  // 终端设备校验
  const validateDeviceStatus = (rule: any, value: any, callback: any) => {
    if (value) {
      equipmentDetail(value).then((res) => {
        if (res.data) {
          if (res.data.isBuild == 0 && res.data.isOutDevice == 1) {
            callback();
          } else {
            callback(new Error('设备不存在或未生成'));
          }
        } else {
          callback(new Error('设备不存在'));
        }
      });
    } else {
      callback();
    }
  };
  // 终端设备号
  const loading1 = ref(false);
  const deviceList = ref([]);
  const remoteMethod = (query: string) => {
    if (query) {
      loading1.value = true;
      getDeviceList({ sn: query }).then((res) => {
        deviceList.value = res.rows;
        loading1.value = false;
      });
    } else {
      deviceList.value = [];
    }
  };

  // 步骤条 上一步 下一步 保存
  const active = ref(0);
  const prev = () => {
    if (active.value === 0) return;
    // 详细地址去除空格
    if (formData.value.addressinfoId.address !== null) {
      formData.value.addressinfoId.address.replace(/\s*/g, '');
    }
    formData.value.terminalList.forEach((item: any) => {
      item.installAddress = item.installAddress === null ? null : item.installAddress.replace(/\s*/g, '');
    });
    formData.value.manageScope = formData.value?.manageScope.replace(/[`~!@#$^\-&*()=|{}':;',\\\[\]\.<>\/?~！@#￥……&*（）——|{}【】%_+“》《‘·'；：""'。，、？\s]/g, '');
    active.value--;
  };
  const next = () => {
    if (active.value > 4) return;
    if (formData.value?.addressinfoId?.address !== null) {
      formData.value.addressinfoId.address = formData.value?.addressinfoId?.address.replace(/\s*/g, '');
      console.log('地址', formData.value.addressinfoId.address);
    }
    formData.value.terminalList.forEach((item: any) => {
      item.installAddress = item.installAddress === null ? null : item.installAddress.replace(/\s*/g, '');
    });
    formData.value.manageScope = formData.value?.manageScope.replace(/[`~!@#$^\-&*()=|{}':;',\\\[\]\.<>\/?~！@#￥……&*（）——|{}【】%_+“》《‘·'；：""'。，、？\s]/g, '');
    FormRef.value?.validate((valid) => {
      if (valid) {
        active.value++;
        active.value === 5 ? handleFormSubmit() : '';
      }
    });
  };
  const handleFormSubmit = () => {
    let params = JSON.parse(JSON.stringify(formData.value));

    // 条件判断
    // 入网类型为 小微商户  营业执照 执照类型 执照编号 执照有效期 置空
    if (params.netType === 3) {
      params.fileList[2].path = null;
      params.licenceType = null;
      params.licenceNo = null;
      params.licenceExpireDate = null;
    }

    // 是否直接接入 否 置空 所属银联机构号 银联商户号
    if (params.isDirectConnect === false) {
      params.unionPayInsNo = null;
      params.unionPayMrchntNo = null;
    }

    // 账号性质 不是对私 置空 证件类型 证件号 预留手机号
    if (params.settleAccount.bankAccountType !== 2) {
      params.settleAccount.accountIdentityType = null;
      params.settleAccount.accountIdentityNo = null;
      params.settleAccount.acctMobile = null;
    }

    // 账号性质 对私 并且 入网类型为 企业商户 才显示备案账户 否则置空
    if (
      !(
        (params.netType === '1' && params.settleAccount.bankAccountType === 2) ||
        (params.netType === '2' && params.settleAccount.bankAccountType === 2 && params.settleAccount.bankAccountName !== params.lepCertName)
      )
    ) {
      params.filingAccount = {
        bankAccountNo: null, // 银行账号
        bankAccountName: null, // 账号名称
        bankCode: null, // 银行类型
        openBank: null, // 开户行
      };
      params.fileList[9].path = null;
      params.fileList[10].path = null;
      params.fileList[11].path = null;
      params.fileList[12].path = null;
    }

    // 开通微信支付宝 为 否 置空 微信费率 支付宝费率
    if (params.switch === false) {
      params.wxPay.feeRate = null;
      params.aliPay.feeRate = null;
    }

    // 图片
    // 过滤掉 fileList fileUrl为空的
    params.fileList = params.fileList.filter((item) => item.path !== null);

    params.terminalList = params.terminalList.map((item) => {
      let newItem = JSON.parse(JSON.stringify(item));
      delete newItem.key;
      delete newItem.installCityOptions;
      delete newItem.installDistrictOptions;
      return newItem;
    });
    if (params.settleAccount.bankAccountNo) {
      params.settleAccount.bankAccountNo = params.settleAccount.bankAccountNo.replace(/\s*/g, '');
    }
    if (params.filingAccount.bankAccountNo) {
      params.filingAccount.bankAccountNo = params.filingAccount.bankAccountNo.replace(/\s*/g, '');
    }
    register(params)
      .then(async () => {
        await handleDeleteDraft();
        ElMessage.success('添加成功');
        await router.push({ path: '/jin/register' });
      })
      .catch((err) => {
        console.log(err);
      });
  };

  // 图片上传回调
  const imageUrl = ref('');
  const digitUppercase = (money) => {
    var cnNums = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']; //汉字的数字
    var cnIntRadice = ['', '拾', '佰', '仟']; //基本单位
    var cnIntUnits = ['', '万', '亿', '兆']; //对应整数部分扩展单位
    var cnDecUnits = ['角', '分', '毫', '厘']; //对应小数部分单位
    var cnInteger = '整'; //整数金额时后面跟的字符
    var cnIntLast = '元'; //整数完以后的单位
    //最大处理的数字
    var maxNum = 999999999999999.9999;
    var integerNum; //金额整数部分
    var decimalNum; //金额小数部分
    //输出的中文金额字符串
    var chineseStr = '';
    var parts; //分离金额后用的数组，预定义
    if (money == '') {
      return '';
    }

    money = parseFloat(money);
    if (money >= maxNum) {
      //超出最大处理数字
      return '超出最大处理数字';
    }
    if (money == 0) {
      chineseStr = cnNums[0] + cnIntLast + cnInteger;
      return chineseStr;
    }

    //四舍五入保留两位小数,转换为字符串
    money = Math.round(money * 100).toString();
    integerNum = money.substr(0, money.length - 2);
    decimalNum = money.substr(money.length - 2);

    //获取整型部分转换
    if (parseInt(integerNum, 10) > 0) {
      var zeroCount = 0;
      var IntLen = integerNum.length;
      for (var i = 0; i < IntLen; i++) {
        var n = integerNum.substr(i, 1);
        var p = IntLen - i - 1;
        var q = p / 4;
        var m = p % 4;
        if (n == '0') {
          zeroCount++;
        } else {
          if (zeroCount > 0) {
            chineseStr += cnNums[0];
          }
          //归零
          zeroCount = 0;
          chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
        }
        if (m == 0 && zeroCount < 4) {
          chineseStr += cnIntUnits[q];
        }
      }
      chineseStr += cnIntLast;
    }
    //小数部分
    if (decimalNum != '') {
      var decLen = decimalNum.length;
      for (var i = 0; i < decLen; i++) {
        var n = decimalNum.substr(i, 1);
        if (n != '0') {
          chineseStr += cnNums[Number(n)] + cnDecUnits[i];
        }
      }
    }
    if (chineseStr == '') {
      chineseStr += cnNums[0] + cnIntLast + cnInteger;
    } else if (decimalNum == '' || /^0*$/.test(decimalNum)) {
      chineseStr += cnInteger;
    }
    console.log(chineseStr);
    return chineseStr;
  };
  const handleImageEvent = (value: string, type: string) => {
    // value 为空把识别字段置空
    if (!value && type === 'card') {
      formData.value.lepCertNo = null;
      formData.value.lepCertName = null;
      return;
    }
    if (!value && type === 'business') {
      formData.value.merchantName = null;
      formData.value.licenceNo = null;
      formData.value.registeredCapital = null;
      return;
    }
    if (!value && type === 'bank') {
      formData.value.settleAccount.bankAccountNo = null;
      return;
    }
    if (!value && type === 'bank1') {
      formData.value.filingAccount.bankAccountNo = null;
      return;
    }
    imageUrl.value = import.meta.env.VITE_APP_IMG_URL + value;
    // 识别图片
    type === 'card' && CardData();
    type === 'business' && businessData();
    type === 'bank' && backData();
    type === 'bank1' && backData1();
  };
  // 识别身份证
  const CardData = () => {
    getCard({ url: imageUrl.value }).then((res) => {
      formData.value.lepCertNo = res.data.face.data.idNumber;
      formData.value.lepCertName = res.data.face.data.name;
    });
  };
  // 识别营业执照
  const businessData = () => {
    getBusiness({ url: imageUrl.value }).then((res) => {
      formData.value.merchantName = res.data.companyName;
      formData.value.licenceNo = res.data.creditCode;
      // formData.value.registeredCapital = res.data.registeredCapital;
      formData.value.addressinfoId.address = res.data.businessAddress;
    });
  };
  // 识别银行卡
  const backData = () => {
    getBank({ url: imageUrl.value }).then((res) => {
      formData.value.settleAccount.bankAccountNo = res.data.cardNumber;
    });
  };

  const backData1 = () => {
    getBank({ url: imageUrl.value }).then((res) => {
      formData.value.filingAccount.bankAccountNo = res.data.cardNumber;
    });
  };

  // 暂存按钮
  const handleTemporarilyStore = () => {
    // 把页面所有数据全部保存
    const params = {
      checkbox1: checkbox1.value,
      checkbox2: checkbox2.value,
      businessTypeOptions: businessTypeOptions.value,
      provinceOptions: provinceOptions.value,
      cityOptions: cityOptions.value,
      areaOptions: areaOptions.value,
      bankOptions: bankOptions.value,
      formData: formData.value,
      active: active.value,
    };
    if (!draft.value) {
      addDraft({ drContent: JSON.stringify(params), drIdent: '1111' }).then(() => ElMessage.success('暂存成功'));
      draftList().then((res) => {
        if (res.data) {
          draft.value = res.data;
        }
      });
      return;
    }
    editDraft({
      id: draft.value.id,
      drContent: JSON.stringify(params),
      drIdent: '1111',
    }).then(() => ElMessage.success('暂存成功'));
  };
  // 查询暂存列表
  const dialogVisible = ref(false);
  // 暂存原数据
  const draft = ref<any>(null);
  const handleDraftList = () => {
    draftList().then((res) => {
      // 存在暂存 需要弹窗询问是否使用暂存
      if (res.data) {
        draft.value = res.data;
        dialogVisible.value = true;
      }
    });
  };
  // 删除
  const handleDeleteDraft = async () => {
    if (!draft.value) return;
    await delDraft(`${draft.value.id}`).then(() => {
      draft.value = null;
    });
  };
  // 弹窗丢弃
  const handleDraftCancel = () => {
    dialogVisible.value = false;
    handleDeleteDraft();
  };
  // 弹窗确认
  const handleDraftConfirm = () => {
    dialogVisible.value = false;
    // 把暂存的数据赋值给页面
    const params = JSON.parse(draft.value.drContent);
    checkbox1.value = params.checkbox1;
    checkbox2.value = params.checkbox2;
    businessTypeOptions.value = params.businessTypeOptions;
    provinceOptions.value = params.provinceOptions;
    cityOptions.value = params.cityOptions;
    areaOptions.value = params.areaOptions;
    bankOptions.value = params.bankOptions;
    formData.value = params.formData;
    active.value = params.active;
  };

  getFeeRate();
  handleDraftList();
  getBankList();
  getBusinessTypeList();
  provinceOptions.value = await getProvinceList(0);
</script>

<style lang="scss" scoped>
  .form-wrap {
    width: 70%;
    margin: 30px auto;

    .mb20 {
      margin-bottom: 20px !important;
    }

    .mt40 {
      margin-top: 40px;
    }

    .el-form-item {
      width: 95%;
    }

    .el-select {
      width: 100% !important;
    }

    .el-date-editor {
      width: 100% !important;
    }

    :deep(.el-date-editor.el-input) {
      width: 100%;
    }

    :deep(.el-cascader) {
      width: 100% !important;
    }
  }

  .btn-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
